<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 解构赋值: es6中通过解构赋值可以快速的获取数组或对象中的值方式
        // 本质: 获取数组 或者 对象中的值
        // 注意: 解构赋值只能在数组或对象中使用




        // 数组解构:
        // 数组解构赋值总结:
        a.只是从数组中取值的一种新方式而已
        b.动态将数组中的每一个值赋值给前面的变量
        c.如果变量的个数少于数组中值的个数, 程序不会报错, 会将数组中的值一一对应的赋值给变量
        d.如果变量的个数多余数组中值的个数, 那么多余的变量的值默认是undefined
        // let [变量1, 变量2] = 数组;
        // let [变量1, 变量2] -----> 定义了若干个变量,不是定义数组
        // = 数组     ----> 程序会自动遍历数组中的值,然后将数组中的每一个值动态的赋值给前面定义的变量
        let ary = [{ 'uname': 'zs' }, { 'uname': 'ls' }, { 'uname': 'ww' }, { 'uname': 'lad' }];
        // 解构赋值: 将数组ary中每一个值动态赋值给变量a1,a2,a3,a4
        let [a1, a2, a3, a4] = ary;
        // 输出数组中每一个值
        console.log(a1, a2, a3, a4);




        // 对象解构: 
        let { 属性: 变量1, 属性: 变量2 } = 对象;
        // 对象解构赋值总结:
        //1. 对象解构赋值中,属性后面的变量可以和属性的名称一样
        let { uname: uname, uage: uage, ulike: ulike } = obj;
        console.log(uname, uage, ulike);
        //2. 如果属性名和变量名一样,则变量名可以省略不写,只能写一个属性即可
        let { uname, uage, ulike } = obj;
        console.log(uname, uage, ulike);
        // 访问对象中不存在的属性,则得到的结果是undefined





        // 创建对象方法
        // ☞ 通过字面量方式创建对象
        let obj = {};

        // ☞ 通过内置构造函数创建对象
        let obj1 = new Object();
        // 内置构造函数: 本质上就是一个函数,创建对象
        // 通过构造函数创建对象必须添加new关键字

        // ☞ 通过工厂方式创建对象
        function stu(name, gender, score) {
            let obj2 = {};  // 或者let obj2 = new  Object();
            obj.name = name
            obj.gender = gender
            obj.score = score
            return obj
        }
        let ls = stu('雷神', '男', 100)
        let gtx = stu('钢铁侠', '男', 110)
        console.log(ls, gtx);

        // ☞ 自定义构造函数创建对象
        function Student(name, age, gender) {
            // 构造函数中的this指向构造函数创建的实例对象
            this.name = name
            this.age = age
            this.gender = gender
        }
        let zs = new Student('张三', '18', '男')
        console.log(zs);








        // 成员: 
        // 属性 +方法的总称
        function Student(uname) {
            //属性
            this.uname = uname;
            //方法
            this.eat = function () {
                console.log(123);
            }
        }
        // ☞ 实例成员:  
        在构造函数内通过this关键字设置的属性或方法
        通过实例对象设置的属性或方法(原因: 构造函数中的this就是实例对象)
        实例成员只能通过实例对象访问
        let zs = new Student('张三');
        console.log(zs.uname);
        zs.eat()

        // ☞ 静态成员: 
        在构造函数外部, 通过 构造函数 本身设置的属性或方法
        静态成员只能通过构造函数访问
        Student.myage = 23;
        Student.myeat = function () { }







        // 内置对象
        // Math 内置对象
        Math.random();
        Math.floor()
        // 数组内置对象
        let ary = [];
        ary.push();
        ary.pop()
        ary.length
        console.log();




        // 数组方法和属性
        let ary = new Array();

        // 翻转
        ary.reverse();    // reverse() 方法: 翻转数组
        例:
        let num = [1, 2, 3, 4, 5]
        let newnum = num.reverse()
        console.log(newnum);

        // 数组拼接
        ary.join();       // join() 方法: 将数组中的值拼接字符串, 返回一个字符串,()里写什么就用什么插入
        let num = [1, 2, 3, 4, 5]
        let string = num.join('/')
        console.log(string);



        // 拼接字符串 括号里写什么就是穿插什么
        ary.concat(ary1); // concat()方法: 将数组合并为一个, 返回合并后的数组
        let zimu = ['a', 'b']
        let num = [1, 2, 3, 4, 5]
        let newnum = zimu.concat(num)
        console.log(newnum);

        // 添加数组内容
        ary.push(值)      // push()方法: 向数组的末尾添加值
        ary.unshift(值)   // unshift()方法: 在数组的开始位置添加值
        ary.splice(索引, 0, 添加的值);//splice()方法: 在数组的任意位置添加值

        // 删除数组内容
        ary.pop()         // pop()方法: 从数组的末尾删除
        ary.shift();      //从数组开始位置删除
        ary.splice(索引, 删除的个数);//从任意位置删除






        indexOf()     //根据值获取索引
        //特点: 从数组的开始向结束位置查找
        ary.indexOf('字符', 开始查找的位置);
        // 特点: 从数组末尾向开始位置查找
        ary.lastIndexOf('字符', 开始查找的位置);




        // 通过foEach 获取数值和索引
        let num = ['1', '2', '3', '4', '5']
        num.forEach(function (items, index) {
            console.log(items); // 数值
            console.log(index); // 索引
        });

        // 必须掌握: filter 过滤器, 根据条件将数组中对应的结果过滤出来
        filter(function (item, index) { }) 过滤筛选数组, 返回一个新数组
        let ary = [1, 2, 3, 4, 5, 6, 7, 8];
        let res = ary.filter(function (item, index) {
            // console.log(item);
            // console.log(index);
            return item % 2 == 0;
        })
        console.log(res);
        // 总结:
        // 1. filter能够实现forEach实现的效果(遍历数组)
        // 2. filter的重点是通过遍历要得到自己想要的结果



        // 映射, 返回的是一个数组
        // 在程序中用来处理数组中的每一个值
        // 返回值: 将数组中原来的值出处理后进行返回 (返回的个数与原来的个数是相同的)
        // 语法: map(function(item, index){})
        let ary = [1, 2, 3, 4];
        let res = ary.map(function (item, index) {
            return item % 2 == 0;
        })
        console.log(res);


    </script>
</body>

</html>